<template>
  <div>
    <el-page-header @back="goBack" content="场景详情"> </el-page-header>
    <div class="ueba-detail-main">
      <secDescriptions
        :data="formConfig.data"
        :colon="true"
        :labelStyle="{ width: '100px', 'text-align': 'right', 'line-height': '36px' }"
        :contentStyle="{ 'line-height': '36px' }"
        :column="3"
        :border="false"
        :keyData="formConfig.baseInfo"
        title="基础信息"
      >
      </secDescriptions>

      <h5 class="cls title">关联指标</h5>
      <el-table class="scenetable" :data="tableData" border style="width: 100%">
        <!-- <el-table-column prop="id" label="指标ID"> </el-table-column> -->
        <el-table-column prop="name" label="指标名称"> </el-table-column>

        <el-table-column prop="reportItemContent" label="指标要求"> </el-table-column>
        <el-table-column prop="repairRecommend" label="修复建议"> </el-table-column>
        <el-table-column prop="address" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="handleClickScene(scope.row.id)" type="text">详情</el-button>
            <el-button @click="syncHole(scope.row)" type="text">同步漏洞平台</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 同步漏洞平台 -->
    <el-dialog title="同步漏洞平台" :visible.sync="holeDiaShow" width="80%">
      <div class="cls title">资产选择</div>
      <el-transfer
        v-model="transferVal"
        :render-content="renderFunc"
        filterable
        :filter-method="filterMethod"
        filter-placeholder="请输入"
        :titles="['资产列表', '选中资产']"
        :props="{
          key: 'assetId',
          label: 'domain',
        }"
        :data="transferData"
      >
      </el-transfer>
      <div class="cls title"><span style="color: red; margin-right: 5px">*</span>现状描述</div>
      <el-input type="textarea" :rows="4" placeholder="请输入" v-model="remarks"> </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="holeDiaShow = false">取 消</el-button>
        <el-button type="primary" @click="saveMonitorRiskList">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 同步漏洞平台 失败的域名 -->
    <el-dialog title="结果" :visible.sync="resultDiaShow" width="40%">
      <el-alert :title="`成功${resultData.sucessNum}条`" type="success" :closable="false"> </el-alert>
      <el-alert type="error" :closable="false" style="margin-top: 10px; cursor: pointer">
        <div slot="title" @click="getMonitorRiskErrorAssest">
          失败{{ resultData.errorNum }}条 <span v-if="resultData.errorNum != 0">（点击查看失败的域名）</span>
        </div>
      </el-alert>
    </el-dialog>
    <!-- 同步漏洞平台 失败的域名 -->
    <el-dialog title="失败列表" :visible.sync="errDiaShow" width="40%">
      <sec-table :tableData="errDomainToHole" :tableCol="errDomainTableCol"></sec-table>
    </el-dialog>
  </div>
</template>

<script>
import secDescriptions from "components/descriptions/myDescriptions";
import { monitorAssetslistApi, saveMonitorRiskListApi, getMonitorRiskErrorAssestApi } from "api/configApi";
export default {
  components: {
    secDescriptions,
  },
  props: {},
  computed: {
    formConfig: function () {
      let tmp = Object.assign({}, this.formData);
      if (this.sceneIdDic.filter((e) => e.value == tmp.sceneId).length > 0) {
        tmp.sceneId = this.sceneIdDic.filter((e) => e.value == tmp.sceneId)[0].label;
      }

      return {
        data: tmp,
        baseInfo: [
          { label: "场景名称", prop: "optionName" },
          {
            label: "场景类型",
            prop: "sceneId",
            formatter: (data) => {
              return this.utils.getDicLabel(this.sceneTypeData, data.sceneId);
            },
          },
          {
            label: "是否互斥",
            prop: "isMutex",
            formatter: (data) => {
              return this.utils.getDicLabel(this.$store.state.dictionary["whetherNum"], data.isMutex);
            },
          },
          { label: "创建人", prop: "creator" },
          { label: "创建时间", prop: "createTime" },
          { label: "更新人", prop: "operator" },
          { label: "更新时间", prop: "modifyTime", span: 3 },
          { label: "备注", prop: "remark" },
        ],
      };
    },
  },
  data() {
    return {
      resultData: {},
      resultDiaShow: false, //结果弹框
      errDiaShow: false, //同步漏洞 域名失败的列表 弹框
      errDomainToHole: [],
      errDomainTableCol: [
        {
          type: "link",
          label: "域名",
          prop: "domain",
          linkConfig: {
            click: ({ row }) => {
              this.$router.push({ path: "/property/form", query: { id: row.assetId } });
            },
          },
        },
        { label: "备注", prop: "remark" },
      ],
      remarks: "", //现状描述
      transferVal: [],
      transferData: [],
      holeDiaShow: false,
      sceneTypeData: [],
      //场景类型下拉框数据
      sceneIdDic: [],
      tableData: [],
      formData: {},
      selectRow: {},
    };
  },
  async mounted() {
    this.sceneTypeData = await this.$store.dispatch("config/sceneTypeOption", {
      pageSize: 1000,
      pageNum: 1,
    });
    if (this.$route.query.id) {
      let sceneList = await this.$store.dispatch("config/sceneList", {});
      this.sceneIdDic = sceneList.data.map((e) => {
        return {
          value: e.id,
          label: e.question,
        };
      });

      this.formData = await this.fatchData(this.$route.query.id);
      this.tableData = this.formData.items;
    }
  },
  methods: {
    filterMethod(query, item) {
      return item.domain.indexOf(query) > -1;
    },
    syncHole(row) {
      this.holeDiaShow = true;
      this.selectRow = row;
      //数据清空
      this.transferVal = [];
      this.remarks = "";
      this.transferData = [];
      monitorAssetslistApi().then((res) => {
        let data = res.data;
        this.transferData = data || [];
      });
    },
    //同步漏洞 保存
    saveMonitorRiskList() {
      let { id, code, scene } = this.selectRow;
      if (!this.remarks) {
        this.message.warning({ message: "请输入现状描述" });
        return;
      }
      saveMonitorRiskListApi({
        sceneId: this.$route.query.sceneId,
        optionId: this.$route.query.id,
        itemCode: code,
        remark: this.remarks,
        assetIds: this.transferVal,
      }).then((res) => {
        console.log(res);
        this.holeDiaShow = false;
        this.resultData = res.data;
        this.resultDiaShow = true;
      });
    },
    //同步漏洞 失败域名列表
    getMonitorRiskErrorAssest() {
      if (this.resultData.errorNum == 0) {
        return;
      }
      this.resultDiaShow = false;
      this.errDiaShow = true;
      getMonitorRiskErrorAssestApi({ specialId: this.resultData.specialId }).then((res) => {
        this.errDomainToHole = res.data || [];
      });
    },
    renderFunc(h, option) {
      let title = `权属负责人：${option.leader}\n权限部门：${option.dept2}`;
      return <span title={title}>{option.domain}</span>;
    },
    getSceneLabel(ids) {
      let t = "";
      if (Array.isArray(ids)) {
        ids.forEach((e) => {
          t += this.utils.getDicLabel("101003", e);
        });
      }
      return t;
    },
    goBack() {
      this.$router.push("/config/scenelist/scenelist");
    },

    async fatchData(id) {
      let res = await this.$store.dispatch("config/sceneOptionGet", { id: id });
      return res.data;
    },
    handleClickScene(id) {
      this.$router.push({
        path: "/config/detail",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.check-box {
  margin: 0 0 20px 20px;
}
.scenetable {
  .el-table__cell {
    background: red;
  }
}
</style>

<style lang="scss">
.scenetable {
  .el-table__header-wrapper {
    .el-table__cell {
      background: #fafafa;
    }
  }
}
.el-transfer-panel {
  width: 40%;
}
</style>
